<template>
  <view class="box">
    <view class="container">
      <view class="header-tab">
        <up-tabs
          :list="tabList"
          @click="changeTab"
          lineColor="#bb7755"
          lineWidth="60rpx"></up-tabs>
      </view>
      <view class="main-container">
        <view class="com-box" v-if="currentTab === 0">
          <dessertCom></dessertCom>
        </view>
        <view class="com-box" style="overflow-y: auto;" v-if="currentTab === 1">
          <evaluateCom></evaluateCom>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup>
import { ref } from 'vue'

// 创建响应式数据
const tabList = ref([{ name: '甜 品' }, { name: '评 价' }])
// 当前点击的tab值
const currentTab = ref(0)
// 点击切换tab
const changeTab = (item) => {
  currentTab.value = item.index
}
</script>
<style lang="scss" scoped>
.box {
  width: 100vw;
  height: 100vh;
  overflow-y: scroll;
  .container {
    width: 95%;
    height: 95%;
    margin: 10rpx auto;
    background-color: #fff;
    border-radius: 10rpx;
    box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.08);
    .header-tab {
      width: 100%;
      height: 80rpx;
      font-size: 30rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .search-box {
        margin-right: 10rpx;
        .search-content {
          width: 180rpx;
          height: 40rpx;
          border-radius: 100rpx;
          border: 1px solid #bb7755;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #9f9f9f;
          .search-text {
            margin-left: 15rpx;
            font-size: 26rpx;
          }
        }
      }
    }
    .main-container {
      width: 100%;
      height: 1000rpx;
      box-sizing: border-box;
      margin-top: -5rpx;
    }
  }
}
.box::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
  display: none;
}
</style>
